<template>
	<view>
		<navbar title="京东返利"  color="#fff" bgColor="transparent" :isZhanwei="false"></navbar>
		<view class="head-box" :style="{background:`url('${imgs.home.jd}')`}" >
			<view class="logo">
				<image :src="imgs.logos.jd" mode=""></image>
			</view>
			<view class="text">京东 | 搜索商品返利</view>
			<view class="search-box">
				<view class="left-box">
					<u-icon color="#CCCCCC" style="margin-right: 16rpx;" name="search"></u-icon>
					<text>搜索搜索京东商品</text>
				</view>
				<view class="right-box">
					搜索
				</view>
			</view>
			<view class="setup-box">
				<view class="setup-title">复制京东商品链接，领返利</view>
				<view class="setups">
					<view class="item">
						<image :src="imgs.logos.jd" mode=""></image>
						<view class="item-info">
							<view>在<text>京东 APP</text>打开</view>
							<view>你想购买的商品</view>
						</view>
					</view>
					<view class="items">
						<image :src="imgs.arrow" mode=""></image>
					</view>
					<view class="item">
						<image :src="imgs.share" mode=""></image>
						<view class="item-info">
							<view>点击<text>分享</text></view>
							 <view>然后<text>复制链接</text></view>
						</view>
					</view>
					<view class="items">
						<image :src="imgs.arrow" mode=""></image>
					</view>
					<view class="item">
						<image :src="imgs.logo" mode=""></image>
						<view class="item-info">
							<view>返回<text>名购岛</text></view> 
							<view>领取返利</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	
		<div class="good-boxs">
			<div class="title">返利推荐</div>
			<div v-if="list.length" > 
				<goodJD @clickHandle="clickHandle" :good="item" v-for="item in list" :key="item" ></goodJD>
			</div>
			<div v-else style="padding-top: 100rpx;">
				<u-empty margin-top="50rpx" mode="list"></u-empty>
			</div>
		</div>
	</view>
</template>

<script>
	import imgs from '@/utils/imgs.js'
	import goodJD from '../components/goodJD/index.vue'
	import navbar from '../components/w-navbar/index.vue'
	export default {
		components:{
				navbar,goodJD
		},
		data() {
			return {
				imgs,
				list:[],
			};
		},
		methods:{
			async getList(){
				const res = await this.$api.jdApi.list()
				this.list = res.data.data||[]
				console.log(this.list);
			},
			clickHandle(e){
				this.$navTo('pageC/goods/goods',{
					id:e,
					type:'jd'
				}) 
			}
		},
		onLoad() {
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
.head-box{
	height: 750rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: relative;
	// box-sizing: border-box;
	// padding-top: 180rpx;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	.logo{
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-bottom: 24rpx;
		>image{
			width: 100%;
			height: 100%;
		}
	}
	.text{
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
		margin-bottom: 24rpx;
	}
	.search-box{
		width: 630rpx;
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
		padding: 8rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24rpx;
		.left-box{
			font-weight: 500;
			font-size: 28rpx;
			color: #CCCCCC;
		}
		.right-box{
			width: 160rpx;
			height: 56rpx;
			background: #FF8C19;
			border-radius: 36rpx;
			font-weight: 500;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
		}
	}

	.setup-box{
		position: absolute;
		bottom: -120rpx;
		width: 702rpx;
		height: 304rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		flex-direction: column;
		.setup-title{
			font-weight: bold;
			font-size: 28rpx;
			color: #333130;
			margin-bottom: 40rpx;
		}
		.setups{
			display: flex;
			align-items: center;
			>.item{
				flex: 1;
				margin-right: 18rpx;
				position: relative;
				>image{
					width: 96rpx;
					height: 96rpx;
				}
				>.item-info{
					position: absolute;
					bottom: -70rpx;
					font-weight: 400;
					font-size: 24rpx;
					left: -50%;
					width: 200rpx;
					color: #666260;
					text-align: center;
					>view{
						>text{
							color: #FF8C19;
						}
					}
				}
			}
			.items{
				flex: 1;
				margin-right: 18rpx;
				>image{
					width: 86rpx;
					height: 20rpx;
				}
			}
		}
	}
}


.good-boxs{
	margin-top: 160rpx;
	// background-color: #fff;
	.title{
		font-weight: bolder;
		font-size: 36rpx;
		color: #333130;
		text-align: center;
		margin-bottom: 36rpx;
	}
}
</style>
